<!--
 * @Author: your name
 * @Date: 2021-07-17 14:13:06
 * @LastEditTime: 2021-07-20 19:53:24
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \project-128-10\src\module-hmmm\Boutique\preview.vue
-->
<template>
  <div>
    <el-dialog
    title="题目预览"
      left
      :visible="value"
      width="900px"
      class="dialog"
      @open="open"
      @close="closeDialog()"
    >

      <div class="preview-header">
        <el-row class="preview-row">
          <el-col :span="6">
            【题型】：{{ getQuestionType() }}
          </el-col>
          <el-col :span="6">
            【编号】：{{previewData.id}}
          </el-col>
          <el-col :span="6">
            【难度】：{{getDifficulty()}}
          </el-col>
          <el-col :span="6">
            【标签】：{{previewData.tags}}
          </el-col>
        </el-row>
        <el-row class="preview-row">
          <el-col :span="6">
            【学科】：{{previewData.subject}}
          </el-col>
          <el-col :span="6">
            【目录】：{{previewData.catalog}}
          </el-col>
          <el-col :span="6">
            【方向】：{{previewData.direction}}
          </el-col>
        </el-row>
      </div>
      <hr />
      <div class="preview-content">
        <div>【题干】:</div>
        <p
          v-html="previewData.question"
          style="color:blue"
        ></p>
        <div v-show="details.questionType === '1' || details.questionType === '2'">
          <!-- 单选 -->
          <template v-if="details.questionType === '1'">
            <div>单选框 选项：（以下选中的选项为正确答案）</div>
            <el-radio-group v-model="option">
              <el-row type="flex">
                <el-col>
                  <el-radio
                    class="radio"
                    @change="change()"
                    :label="item.isRight"
                    v-for="(item,index) in options"
                    :key="index"
                    :style="item.isRight === option?'color:blue':''"
                  >{{item.title}}</el-radio>
                </el-col>
              </el-row>
            </el-radio-group>
          </template>
          <!-- 多选 -->
          <template v-else>
            <div>多选题 选项：（以下选中的选项为正确答案）</div>
            <el-checkbox-group v-model="checkList">
              <el-checkbox
                class="radio"
                @change="changes()"
                :label="item.isRight"
                v-for="(item,index) in options"
                :key="index"
                :style="item.isRight === option?'color:blue':''"
              >{{item.title}}</el-checkbox>
            </el-checkbox-group>
          </template>
        </div>
        <hr />
        <div>
          【参考答案】:<el-button
            type="danger"
            size="mini"
            @click="source()"
          >视频答案预览</el-button>
        </div>
        <div>

          <video
            v-show="showTv"
            ref="video"
            autoplay
            id="myVideo"
            controls
            preload="load"
            class="video-js"
          >
            <source
              :src="details.videoURL"
              type="video/mp4"
              ref='source'
            >
          </video>

        </div>
        <hr />
        <div>
          <span>【答案解析】：</span><span v-html="previewData.answer"></span>
        </div>
        <hr />
        <div>
          【题目备注】:{{previewData.remarks}}
        </div>
        <hr />

      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <!-- <el-button>取 消</el-button> -->
        <el-button class="button" type="primary" @click="closeDialog()">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { QuestionType, Difficulty } from './handle'
import { detail } from '@/api/JXTK/questions.js'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    previewData: {
      // 预览数据
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      dialogVisible: true,
      sum: 1,
      details: {}, // 试题的详情
      options: [], // 选项的数组
      option: 1, // 选中的选项
      checkList: [1], // 多选的选项
      showTv: false,
      notSupportedMessage: '此视频暂无法播放，请稍后再试' // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    }
  },
  mounted () {},
  methods: {
    // 关闭弹出层
    closeDialog () {
      this.$emit('input', false)
    },
    // 获取试类型
    getQuestionType () {
      return QuestionType[this.previewData.questionType]
    },
    getDifficulty () {
      return Difficulty[this.previewData.questionType]
    },
    async open () {
      // console.log(11)
      // console.log(this.previewData.id)
      const res = await detail({ id: this.previewData.id })
      console.log(res)
      // 详情
      this.details = res.data
      console.log(this.details.videoURL)
      // 选项
      this.options = res.data.options
      console.log(this.options)
    },
    // 选项不能改变
    change () {
      this.option = 1
    },
    changes () {
      this.checkList = [1]
    },
    source () {
      this.showTv = !this.showTv
      this.$nextTick(() => {
        this.$refs.video.load()
        this.$refs.video.play()
      })
    }

  }
}
</script>

<style >
/* .dialog {

    height: 800px;
} */
.preview-header {
  height: 70px;
  margin-top: 10px;
}
.preview-row {
  line-height: 35px;
}
ul li {
  list-style: none;
}
.radio p {
  height: 30px;
}
hr {
  margin: 20px 0;
}
.preview-content {
  /* height: 400px; */
  margin-bottom: 100px;
}
.radio {
  display: block;
  margin-top: 20px;
}
.title {
  float: left;
}
/* .button{
  float: right;
} */
.dialog-footer{
  position: relative;
}
/* /deep/.button {
  position: absolute;
  bottom: 40px;
  right: 30px;
} */
</style>
